<template>
  <div class="box">
    <div>
      <div class="top">
        <span v-if="pageName == 'addPayMessage' ">新增缴费信息</span>
        <span v-if="pageName == 'editPayMessage' ">修改缴费信息</span>
        <div />
      </div>
      <el-row :span="24" justify="start" type="flex">
        <el-col :span="10">
          <div class="title" v-if="pageName == 'addPayMessage' ">
            <p class="font">会员名称</p>
            <el-select
              v-model="form.mid"
              @change="toEndTime(form.mid)"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in memberNameList"
                :key="index"
                :label="item.memberName"
                :value="item.mid"
              >
              </el-option>
            </el-select>
          </div>
          <div class="title" v-if="pageName == 'editPayMessage' ">
            <p class="font">会员名称</p>
            <span>{{ form.memberName }}</span>
          </div>
          <div class="title" v-if="pageName == 'addPayMessage' ">
            <p class="font">到期时间</p>
            <span v-show="expirationTime == ''">请选择会员</span>
            <span v-show="expirationTime != null && isEnd == '0'">{{ expirationTime }}</span>
            <span v-show="expirationTime != null && isEnd == '1'">已过期</span>
            <span v-show="expirationTime == null">未查询到会员期限信息</span>
          </div>
          <div class="title">
            <p class="font">缴费金额</p>
            <el-input class="input" v-model="form.money" style="width:13.75rem"></el-input>
          </div>
          <div class="title">
            <p class="font">缴费时间</p>
            <el-date-picker
              v-model="form.paymentTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择缴费时间"
            >
            </el-date-picker>
          </div>
          <div class="title" v-if="pageName == 'editPayMessage' ">
            <p class="font">修改前有效时间</p>
            <span>{{ oldTime.beginTime }}  至  {{ oldTime.endTime }}</span>
          </div>
          <div class="title">
            <p class="font" v-if="pageName == 'addPayMessage' ">有效时间</p>
            <p class="font" v-if="pageName == 'editPayMessage' ">修改后有效时间</p>
            <el-date-picker
              v-model="effectiveTime"
              class="input"
              @change="chooseTime()"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </el-col>
      </el-row>
      <div class="button">
        <el-button size="medium" @click="reset()">重置</el-button>
        <el-button type="primary" size="medium" @click="submitForm"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { bookkeeping,getMemberMessage,getBookingByBid,updateMemberMessage } from '@/api/member'
export default {
  data() {
    return {
      //提交参数
      form: {
        beginTime: "",
        endTime: "",
        modifyTime: "",
        money: "",
        mid: "",
        bid:'',
        memberName:'',
        paymentTime: "",
      },
      //文件列表
      fileList: "",
      //关键词列表
      keyWordList: [],
      //角色名字
      memberNameList: [],
      // 选择时间
      effectiveTime:[],
      // 新增的到期时间
      endTime:'',
      // 旧的到期时间
      expirationTime:'',
      //是否过期
      isEnd:'',
      //页面属性
      pageName:'',
      oldTime:{
        beginTime: "",
        endTime: ""
      }
    };
  },
  created() {
    this.judge()
  },
  methods: {
    //判断是新增还是修改
    judge(){
      const keyWord = this.$route.query.key
      if(keyWord == 'add'){
        this.pageName = 'addPayMessage'
        this.getMember()
      }else{
        this.pageName = 'editPayMessage'
        getBookingByBid(keyWord).then((res) => {
          if(res.code == 200){
            this.form = res.data
            //获取修改前的时间
            this.oldTime.beginTime = res.data.beginTime
            this.oldTime.endTime = res.data.endTime 
          }
        })
      }
    },
    //获取会员名字和到期时间
    getMember() {
      getMemberMessage().then((res) => {
        if (res.code === 200) {
          this.memberNameList = res.data;
        }
      });
    },
    //提交
    submitForm() {
      let params = {
        ...this.form,
      };
      if(this.pageName == 'addPayMessage'){
          bookkeeping(params).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "提交成功",
              type: "success",
            });
            this.back()
          }
        });
      }else if(this.pageName == 'editPayMessage'){
        updateMemberMessage(params).then((res) => {
          if (res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.back()
        }
        })
      }
    },
    // 获取时间
    chooseTime(){
      this.form.beginTime = this.effectiveTime[0]
      this.form.endTime = this.effectiveTime[1]
      if(this.expirationTime != null){
        if(Date.parse(this.effectiveTime[0]) < Date.parse(this.expirationTime)){
        this.$message.error('新的起始时间需要在该会员的上次到期时间后');
        this.effectiveTime[0] = this.expirationTime
        this.effectiveTime[1] = ''
        this.form.beginTime = ''
        this.form.endTime = ''
        }
      }
    },
    //获取剩余时间
    toEndTime(id) {
      this.memberNameList.forEach((item, index) => {
        if (id == item.mid) {
          //获取到该会员的会员结束时间
          this.expirationTime = item.expirationTime;
          //将获取到的结束时间作为现在的起始时间
          this.effectiveTime[0] = item.expirationTime
          //获取结束时间的时间戳,和现在时间戳比较
          if(Date.parse(this.expirationTime) < new Date().getTime()){
            //到期
            this.isEnd = '1'
          }else{
            //未到期
            this.isEnd = '0'
          }
          return
        }
      });
    },
    reset() {
      //提交参数
      this.form = {
        beginTime: "",
        endTime: "",
        modifyTime: "",
        money: "",
        mid: "",
        paymentTime: "",
      };
    },
    //返回页面操作
    back() {
      this.$router.push({
        path: "/member/setEndTime",
      });
    },
  },
};
</script>
<style scoped>
.box{
  padding:1.5rem;
  background-color: #f5f5f5;
}
.box > div{
  background-color: white;
  padding: 1.5rem;
  height: 50rem;
}
.font{
  font-family: Alibaba PuHuiTi;
  font-size: .9375rem;
  color: #4F5570;
  font-weight: 400;
}
.top{
  margin: 2.5rem 0rem 2.5rem 3.5rem;
  display: flex;
}
.top > span {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 1rem;
  color: #000000;
  margin-left: .5rem;
  width: 7.5rem;
}
.top > div {
  border-bottom: .0625rem solid #e5e5e5;
  height: .9375rem;
  width: 100%;
  padding-bottom: -1.25rem;
  margin-left: .9375rem;
}
.top::before {
  content: "";
  width: .1875rem;
  background: #2854b7;
  height: 1.25rem;
  border-radius: .125rem;
}
.title,.button,.image,.label{
  margin-left:4.375rem;
  margin-bottom: 1.875rem;
}
.constitution{
  margin-left:4.375rem;
}
.button el-button:first-child(){
  width:5rem;
  line-height: 1.25rem;
  height: 2.5rem;
}
.button el-button:last-child(){
  margin-left: 1.875rem;
  width:6.875rem;
  height: 2.5rem;
  border:none
}
</style>